<template>
	<div class="route-dialog" v-if="value">
		<div class="dialog-bg" @click="onDialogClick"></div>
		<!-- 弹窗内容布局 -->
		<div class="route-content-container" :style="routeContentStyle">
			<div class="route-content">
				<!-- 时间数据 -->
				<div class="hor-layout-center">
					<img class="clock-img" :src="clockImg" />
					<div class="clock-view">{{ curDay }}</div>
				</div>
				<!-- 横向数据 -->
				<div class="key-value-layout hor-layout-center">
					<div class="ver-layout">
						<div class="key-view">{{ allData.totalTouristNum }}</div>
						<div class="value-view">累计数量</div>
					</div>
					<div class="key-line"></div>
					<div class="ver-layout">
						<div class="key-view">{{ allData.touristNum }}</div>
						<div class="value-view">全票</div>
					</div>
					<div class="key-line"></div>
					<div class="ver-layout">
						<div class="key-view">{{ allData.touristTeamNum }}</div>
						<div class="value-view">团队</div>
					</div>
				</div>
				<!-- 具体数据 -->
				<div class="content-layout">
					<div class="hor-layout-center">
						<img class="info-img" :src="goImg" />
						<div class="info-left">
							去程:{{ goData.totalTouristNum }}(全票{{ goData.touristNum }}，团队{{ goData.touristTeamNum }}）
						</div>
						<div class="info-line"></div>
						<div class="info-right">携童{{ goData.touristChildNum }}</div>
					</div>
					<div class="info-layout hor-layout-center">
						<img class="info-img" :src="backImg" />
						<div class="info-left">
							回程:{{ backData.totalTouristNum }}(全票{{ backData.touristNum }}，团队{{ backData.touristTeamNum }}）
						</div>
						<div class="info-line"></div>
						<div class="info-right">携童{{ backData.touristChildNum }}</div>
					</div>
					<div class="info-layout hor-layout-center">
						<img class="info-img" :src="seaImg" />
						<div class="info-left">海口:{{ haikouData.totalTouristNum }}</div>
					</div>
				</div>
				<div class="copy-view" @click="copyClick">复制</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		name: 'index',
		props: {
			value: {
				type: Boolean
			},
      scrollTop:{
        type:[String,Number]
      }
		},
		data() {
			return {
				curDay: '',
				//票数据
				allData: {},
				goData: {},
				backData: {},
				haikouData: {},
				clockImg: require('static/img/icon_main_clock.png'),
				goImg: require('static/img/icon_main_go.png'),
				backImg: require('static/img/icon_main_back.png'),
				seaImg: require('static/img/icon_main_sea.png')
			}
		},
    computed:{
      routeContentStyle(){
        return {top:`calc(263px - ${this.scrollTop}px)`}
      }
    },
		created() {
			this.initData()
		},
		methods: {
			initData() {
				this.getTodayData()
				let day2 = new Date()
				day2.setTime(day2.getTime())
				this.curDay = day2.getDate() + '日'
				let dateValue = day2.getFullYear() + '-' + (day2.getMonth() + 1) + '-' + day2.getDate()
			},
			getTodayData() {
				uniCloud.callFunction({
					name: 'json-data',
					data: {
						action: 'mChart',
						name: 'ticket.json'
					},
					success: (res) => {
						console.log(res)
						res = res.result
						res.forEach(ticket => {
							if (ticket.flag === '1') {
								this.allData = ticket
							} else if (ticket.flag === '2') {
								this.goData = ticket
							} else if (ticket.flag === '3') {
								this.backData = ticket
							} else if (ticket.flag === '4') {
								this.haikouData = ticket
							}
						})
					},
				})
			},
			onDialogClick() {
				this.$emit('input', false)
			},
			//复制功能逻辑
			copyClick() {
				let copyData =
					`                 ${this.curDay}数据\n` +
					`（共${this.allData.totalTouristNum}，全票${this.allData.touristNum}，团队${this.allData.touristTeamNum}）\n` +
					`1.去程${this.goData.totalTouristNum}（全票${this.goData.touristNum}，团队${this.goData.touristTeamNum}）携童${this.goData.touristChildNum}\n` +
					`2.回程${this.backData.totalTouristNum}（全票${this.backData.touristNum}，团队${this.backData.touristTeamNum}）携童${this.backData.touristChildNum}\n` +
					`3.海口${this.haikouData.totalTouristNum}`
				copyData = copyData.replace(/undefined/g, ' ')
				//复制功能
				let _input = document.createElement('textarea')
				_input.value = copyData
				document.body.appendChild(_input)
				_input.select()
				document.execCommand('Copy')
				document.body.removeChild(_input)
				uni.showToast({
					title: "复制成功"
				})
				this.onDialogClick()
			}
		}
	}
</script>

<style scoped>
	.route-dialog {
		position: fixed;
		top: 0;
		left: 0;
		z-index: 20;
		width: 100%;
		height: 100%;
	}

	.dialog-bg {
		width: 100%;
		height: 100%;
		opacity: 0.3;
		background-color: rgba(0, 0, 0, 0.7);
	}

	.route-content-container {
		top: 263px;
		width: 100%;
		position: absolute;
		background: transparent;
	}

	.route-content {
		position: relative;
		margin: 0px 27px;
		padding: 22px;
		background: white;
		border-radius: 10px;
		box-shadow: 0px 1px 5px 1px rgba(36, 36, 36, 0.1);
	}

	.clock-img {
		width: 16px;
		height: 16px;
	}

	.clock-view {
		font-size: 15px;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #404144;
		line-height: 21px;
		margin-left: 3px;
	}

	.key-value-layout {
		width: 100%;
		margin: 16px 0px;
		justify-content: space-between;
	}

	.key-view {
		font-size: 22px;
		font-family: DINAlternate-Bold, DINAlternate;
		font-weight: bold;
		color: rgba(64, 65, 68, 1);
		line-height: 26px;
	}

	.value-view {
		font-size: 14px;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: rgba(58, 58, 58, 1);
		line-height: 20px;
	}

	.key-line {
		width: 1px;
		height: 36px;
		background: #eaedf3;
	}

	.info-layout {
		margin-top: 20px;
	}

	.info-img {
		width: 15px;
		height: 15px;
		margin-right: 6px;
	}

	.info-line {
		width: 1px;
		height: 15px;
		background: #eaedf3;
	}

	.info-left {
		flex: 1.95;
	}

	.info-right {
		flex: 0.64;
		text-align: center;
	}

	.copy-view {
		position: absolute;
		right: 25px;
		bottom: 18px;
		color: white;
		font-size: 12px;
		padding: 3px 5px;
		border-radius: 3px;
		background: #00bdff;
	}

	.route-content:before {
		content: '';
		border-bottom: 13px solid white;
		/*箭头背景颜色*/
		border-left: 10px solid transparent;
		border-right: 10px solid transparent;
		position: absolute;
		/*绝对定位1*/
		top: -12px;
		/*距离顶部位置偏移量2*/
		right: 25px;
		/*距离左边位置偏移量3*/
	}

	.content-layout {
		font-size: 12px;
	}
</style>
